<%@page import="MODEL.POJO.LoaiSanPhamPOJO"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="miss_Ngan" />
<title>Trang Chủ NamA</title>
<style type="text/css">
*{margin: 0;padding: 0;}

#light_box{
    position: fixed;
    width: 100%;height: 100%;
    left: 0;top: 0;
    background:#003333;
    display: none;
}

#form{
    margin: 20px auto;
    /*border: 0px solid #747474;*/
    width:700px;
	height:450px;
        color:#ff6699;
    display: none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#form div{
    background:#003333;
    margin: 6px;
    border: 0px solid #747474;
    overflow: hidden;
}

</style>
<script src="js/jquery.min2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('body').append('<div id="but_login"></div><div id="light_box"></div>')
    $('#but_login').append(function(){
        //$('#light_box').css({'display':'block','opacity':'0'}).animate({opacity:0.6},200)
        $('#light_box').css('opacity','0.9').fadeIn(200)
        $('#form').appendTo('#light_box').show()
        formTop()
    })
    $('#form div h5').click(function(){
        $('#light_box').hide()
    })
    $(window).resize(function(){
        formTop()
    })
    function formTop(){
        $('#form').css('margin-top',($('#light_box').height()-$('#form').height())/2)
    }
    
})
</script>

<script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/interface.js"></script>
        <link href="CSS/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="form">
    <div>
        <img src="images/POPUPTLVDELL.png"/>
        <h5>ĐÓNG</h5>
    </div>
</div>
    
    <div class="dock" id="dock">
            <div class="dock-container">
                <%
                    ArrayList<LoaiSanPhamPOJO> ds = (ArrayList<LoaiSanPhamPOJO>) request.getAttribute("LoaiSanPhams");
                    //for (int i = 0; i < ds.size(); i++) {
                    LoaiSanPhamPOJO lsp = ds.get(0);
                %>
                <% LoaiSanPhamPOJO lsp2 = ds.get(1);%>
                
                <a class="dock-item" href="HomeController?Action=<%=lsp2.getIdloaisanpham()%>&idloaisanpham=<%=lsp2.getIdloaisanpham()%>"><span style="font-size:36px; color:#FFFFFF; font-style:inherit"><%=lsp2.getTenloaisanpham()%></span><img src="images/Laptop.png" alt="maybo" /></a> 
                
                <% LoaiSanPhamPOJO lsp3 = ds.get(2);%>
                <a class="dock-item" href="HomeController?Action=<%=lsp3.getIdloaisanpham()%>&idloaisanpham=<%=lsp3.getIdloaisanpham()%>"><span style="font-size:36px; color:#FFFFFF; font-style:inherit"><%=lsp3.getTenloaisanpham()%></span><img src="images/Maybo.png" alt="apple" /></a> 
                
                <a class="dock-item" href="HomeController?Action=<%=lsp.getIdloaisanpham()%>&idloaisanpham=<%=lsp.getIdloaisanpham()%>"><span style="font-size:36px; color:#FFFFFF; font-style:inherit"><%=lsp.getTenloaisanpham()%></span><img src="images/Apple.png" alt="laptop" /></a> 
            </div>
        </div>
        <script type="text/javascript">
	
            $(document).ready(
            function()
            {
                $('#dock').Fisheye(
                {
                    maxWidth: 220,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 180,
                    proximity: 220,
                    halign : 'center'
                }
            )
            }
        );

        </script>
    
    
</body>
</html>